<template>
  <div>
    <v-header title="我的订单" :headerLeftStatus="headerLeftStatus" />
    <div class="orderMain" id="transitionName">
      <div class="content">
        <div class="content-list" v-for="(list,index) in order" @click="jumpOrderDetail(list)" :key="index">
          <div class="_order">
            <p class="left">订单号：{{list.orderNumber}}&nbsp;&nbsp;&nbsp;已完成</p>
            <p class="right">
                <img
                style="width:0.7rem;height:0.7rem"
                src=""
                alt
                @click.stop="delOrder(index)"
                >
            </p>
          </div>
          <div class="order">
            <img :src="list.img_url">
            <div class="order-div">
              <h3>{{list.name}}</h3>
              <p class="order-div-price">￥{{toFixed(list.price)}}</p>
            </div>
            <div class="order-number">
              <p>× {{list.value ? list.value : 1}}</p>
            </div>
          </div>
          <div class="order-2">
            <div class="order-2-box">
                <p class="order-2-one">
                应付金额：
                <span style="color:red">￥{{toFixed(list.price * list.value)}}</span>
                </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState,mapMutations } from 'vuex'
import header from '@/components/header/index'
export default {
  name: "oerder",
  data() {
    return {
      headerLeftStatus: true
    };
  },
  methods: {
    ...mapMutations({
      delOrder: 'order/DEL_ORDER'
    }),
    jumpOrderDetail(list) {
      this.$router.push({
        path: '/orderDetail',
        query: {
          orderNumber: list.orderNumber
        }
      })
    },
    toFixed(value) {
      return JSON.parse(value).toFixed(2)
    },
  },
  computed: {
    ...mapState({
      'order': state => state.order.orders
    })
  },
  components: {
    'v-header': header
  }
};
</script>

<style lang="less" scoped>
.orderMain {
  position: relative;
  top: 1.5rem;
  .content {
    width: 100%;
    height: auto;
    .content-list {
      width: 100%;
      height: auto;
      margin-bottom: 0.3rem;
      ._order {
        width: 100%;
        height: 1.3rem;
        line-height: 1.3rem;
        background: #ffffff;
        .left {
          float: left;
          color: #666;
          margin-left: 0.5rem;
          font-size: 0.35rem;
        }
        .right {
          float: right;
          color: rgb(0, 172, 255);
          margin-right: 0.3rem;
          font-size: 0.35rem;
        }
      }
      .order {
        width: 100%;
        height: 3rem;
        background: white;
        border-bottom: 1px solid #f0f0f0;
        border-top: 1px solid #f0f0f0;
        display: flex;
        img {
          margin: 0.3rem;
          width: 23%
        }
        .order-div {
          width: 50%;
          height: auto;
          h3 {
            font-size: 0.45rem;
            margin-top: 0.3rem;
            color: #666;
          }
          .order-div-price {
            font-size: 0.4rem;
            margin-top: 0.15rem;
            color: red;
          }
        }
        .order-number {
          width: 27%;
          height: 100%;
          display: inline-block;
          font-size: 0.45rem;
          display: flex;
          justify-content: flex-end;

          p {
            margin-right: 0.5rem;
            margin-top: 0.3rem;
            color: #666;
          }
        }
      }
      .order-2 {
        width: 100%;
        height: 1.4rem;
        background: white;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .order-2-box {
          width: 50%;
          float: right;
          text-align: right;
          margin: 0.2rem 0.4rem;
          .order-2-one {
            font-size: 0.35rem;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>

